<template>
  <div style="height:100%">
    <div class="login-top">
      <span class="fl">
        <img src="../../assets/images/logo-system.png">
      </span>
      <span class="fr">
        <img src="../../assets/images/logo-company.png">
      </span>
    </div>
    <div class="login-con">
      <div class="login-box">
        <el-form
          class="login-form"
          ref="formData"
          :model="formData"
          :rules="formRule"
          label-width="80px"
        >
          <el-form-item class="login-form-label" label="账号" prop="passport">
            <el-input v-model="formData.passport" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item class="login-form-label" label="密码" prop="password">
            <el-input
              v-model="formData.password"
              :type="!canPasswordView?'password':'text'"
              auto-complete="off"
            >
              <i slot="suffix" class="el-input__icon el-icon-view" @click="changePasswordInputType"></i>
            </el-input>
          </el-form-item>
          <el-form-item class="center">
            <el-button @click="submitForm('formData')">登录</el-button>
            <el-button @click="resetForm('formData')">重置</el-button>
            <el-button @click="sendSample">送样</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="login-footer">
      <span>
        版权所有
        <span class="pdl-10">上海汽车变速器有限公司</span>
      </span>
      <span class="pdl-100">
        开发单位
        <span class="pdl-10">上海骏诺信息科技有限公司</span>
      </span>
    </div>
    <el-dialog title="送样" :visible.sync="sampleModal">
      <el-form :model="sampleForm">
        <el-form-item
          :label="getLabel(index)"
          :label-width="formLabelWidth"
          v-for="(item,index) in sampleForm.taskNo"
          :key="index"
        >
          <el-input
            v-model.lazy="item.value"
            auto-complete="false"
            @focus="changeTaskNo"
            @change="acceptTaskNo"
          ></el-input>
          <div>{{item.label}}</div>
        </el-form-item>
        <!-- <el-form-item label="送样人" :label-width="formLabelWidth">
                                <el-input v-model="sampleForm.empNo" auto-complete="false"></el-input>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sampleModal = false">取 消</el-button>
        <el-button type="primary" @click="actSendSample">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let base64 = require("js-base64").Base64;
import { loginService } from "service/auth";

import {
  postBatchTakeSampleService,
  getUserInfo,
  getApplyInfoByTaskNoService
} from "service/task";
export default {
  name: "Login",
  data() {
    return {
      formLabelWidth: "200",
      sampleForm: {
        taskNo: [
          {
            value: ""
          }
        ],
        taskArr: [{}],
        username: ""
      },

      sampleModal: false,
      passTypeOption: [
        {
          value: "0",
          label: "检测单位"
        },
        {
          value: "1",
          label: "客户账号"
        }
      ],
      canPasswordView: false,
      formData: {
        passport: "",
        password: "",
        passType: "0"
      },
      formRule: {
        passport: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    getLabel(index) {
      return "扫描值" + (index + 1);
    },
    actSendSample() {
      let submitForm = {};
      let newArr = [];
      for (let i = 0; i < this.sampleForm.taskNo.length; i++) {
        if (
          this.sampleForm.taskNo[i].value &&
          this.sampleForm.taskNo[i].value != ""
        ) {
          newArr.push(this.sampleForm.taskNo[i].value);
        }
      }
      if (newArr.length <= 1) {
        this.$alert("请先输入委托单号和员工编号", "提示", {
          type: "error"
        });
        return;
      }
      submitForm.username = newArr.pop();
      submitForm.taskNo = newArr;
      let that = this;
      postBatchTakeSampleService(submitForm).then(res => {
        if (res.data.success) {
          this.$alert(`操作成功`, "提示", {
            type: "success"
          });
          //this.refreshData();
          that.sampleModal = false;
          that.sampleForm = {
            taskNo: [
              {
                value: ""
              }
            ],
            taskArr: [{}],
            username: ""
          };
          // that.sampleModal = false;
        } else {
          this.$alert(res.data.message, "提示", {
            type: "error"
          });
        }
      });
    },
    changeTaskNo(v) {
      //console.log(v);
      // let newArr = [];
      let x = 0;
      for (let i = 0; i < this.sampleForm.taskNo.length; i++) {
        if (
          this.sampleForm.taskNo[i].value &&
          this.sampleForm.taskNo[i].value != ""
        ) {
        } else {
          x++;
        }
      }
      // newArr.push({});
      if (x < 2) {
        this.sampleForm.taskArr.push({});
        this.sampleForm.taskNo.push({
          value: ""
        });
      }
    },
    acceptTaskNo(v) {
      console.log(v);
      let x = 0;
      if (v && v != "") {
        for (let i = 0; i < this.sampleForm.taskNo.length; i++) {
          if (this.sampleForm.taskNo[i].value == v) {
            x++;
            if (x >= 2) {
              this.sampleForm.taskNo[i].value = "";
            }
          }
        }
        if (x >= 2) {
          this.$alert("已经扫描过当前送样单号", "提示", {
            type: "error"
          });

          return;
        }
        getApplyInfoByTaskNoService(v).then(res => {
          if (res.data.result) {
            for (let i = 0; i < this.sampleForm.taskNo.length; i++) {
              if (this.sampleForm.taskNo[i].value == v) {
                this.sampleForm.taskArr[i] = res.data.result;
                let task = res.data.result;
                if (task) {
                  this.sampleForm.taskNo[i].label = `零件号：${
                    task.partNumber
                  },零件名称：${task.partName},热处理炉号：${
                    task.heatingNumber
                  }`;
                  this.sampleForm.taskNo.push({
                    value: ""
                  });
                }
              }
            }
          }
          console.log(this.sampleForm.taskArr);
        });
      }
    },
    changePasswordInputType() {
      this.canPasswordView = !this.canPasswordView;
    },
    sendSample() {
      this.sampleForm = {
        taskNo: [
          {
            value: ""
          }
        ],
        taskArr: [{}],
        username: ""
      };
      this.sampleModal = true;
    },
    submitForm(formName) {
      this.$message("登录中");
      this.$refs[formName].validate(valid => {
        if (valid) {
          loginService(
            this.formData.passport,
            this.formData.password,
            this.formData.passType
          ).then(response => {
            if (response["data"]["code"] == 200) {
              localStorage.setItem("token", response["data"]["result"]);
              localStorage.setItem("username", this.formData.passport);
              getUserInfo().then(res => {
                localStorage.setItem(
                  "currentUser",
                  JSON.stringify(res.data.result)
                );
                this.$router.push({
                  path: "/main/home/backlog"
                });
              });
            } else {
              this.$message.error("用户名或密码错误");
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.formData = {
        passport: "",
        password: "",
        passType: "0"
      };
    }
  }
};
</script>

<style scoped>
.el-button:focus,
.el-button:hover {
  color: #fff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.el-select {
  width: 100%;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.center {
  text-align: center;
}

.login-top img {
  margin-top: 17px;
}

.login-form {
  padding: 20px 100px 30px 100px;
}

.login-con {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/login-bg.png") no-repeat;
  background-position: center;
}

.login-box {
  width: 670px;
  height: 320px;
  background-image: url("../../assets/images/login-box.png");
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -220px;
  margin-left: -335px;
  padding-top: 80px;
}

.login-box form {
  color: #fff;
}

.login-box form label {
  color: #fff;
  font-size: 16px;
}

.login-box .ant-form-item {
  margin-bottom: 14px;
}

.login-box form button {
  color: #fff;
  background: linear-gradient(to bottom, #99d3f8, #0564ad);
  font-size: 16px;
  width: 105px;
  height: 35px;
  border: 1px solid #5693af;
  letter-spacing: 1em;
  text-align: left;
  padding-left: 28px;
}

.login-footer {
  height: 40px;
  width: 100%;
  line-height: 40px;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.pdl-100 {
  padding-left: 100px;
}

.pdl-10 {
  padding-left: 10px;
}

.letter-1 {
  letter-spacing: 0.8em;
}

.relative {
  position: relative;
}

/* 屏幕适配 */

@media (min-width: 1280px) {
  .login-con {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/login-bg.png") no-repeat;
    background-size: cover;
    background-position: 0 -260px;
  }
}
</style>
